<template>
	<view class="shop-order-list">
		<cu-custom bgColor="bg-gradual-orange" :isBack="true">
			<block slot="content">营收统计</block>
		</cu-custom>
    
    <view class="">
      <view class="order-time">
        <view class="order-time-title">收款明细({{list.length}})</view>
      </view>
      <view class="order-list">
        <view class="time">
          <view class="cu-form-group">
            <picker mode="date" :value="dateStart" :start="startDate" :end="endDate" @change="bindDateStartChange">
              <view class="picker">{{dateStart}}</view>
            </picker>
            <picker mode="date" :value="dateEnd" :start="startDate" :end="endDate" @change="bindDateEndChange">
              <view class="picker">{{dateEnd}}</view>
            </picker>
          </view>
        </view>
        <view class="stat">
          <view class="item">
            <view class="item-icon"><image src="../../../static/order_1.png" mode=""></image></view>
            <view class="item-text">
              <view class="label">
                收款金额
              </view>
              <view class="num">
                {{allMoney}}
              </view>
            </view>
          </view>
          <!-- <view class="item">
            <view class="item-icon"><image src="../../../static/order_2.png" mode=""></image></view>
            <view class="item-text">
              <view class="label">
                用券金额
              </view>
              <view class="num">
                {{allCouponMoney}}
              </view>
            </view>
          </view> -->
        </view>
      </view>
    </view>
    
    <view class="">
      <view class="order-time">
        <view class="order-time-title">客户统计</view>
      </view>
      
      <view class="order-list">
        <view class="order-tab">
          <view v-for="(item,index) in tab" :key="index" :class="{'tab-item': true, 'tab-item-active': item.active}" @tap="setActive(index)">{{item.text}}</view>
        </view>
        <view class="stat">
          <view class="item">
            <view class="item-icon"><image src="../../../static/order_3.png" mode=""></image></view>
            <view class="item-text">
              <view class="label">
                新客户
              </view>
              <view class="num">
                {{newUser}}
              </view>
            </view>
          </view>
          <view class="item">
            <view class="item-icon"><image src="../../../static/order_4.png" mode=""></image></view>
            <view class="item-text">
              <view class="label">
                老客户
              </view>
              <view class="num">
                {{oldUser}}
              </view>
            </view>
          </view>
        </view>
      
      </view>
    </view>
    
    <view class="">
      <view class="order-time">
        <view class="order-time-title">订单明细({{list.length}})</view>
      </view>
    
      <view class="cu-list menu">
        <view class="list-item" v-for="(item, i) in list" :key="i">
          <view class="list-time">{{item.pay_time|dataFormat}}</view>
          <view class="list-content">
            <text>订单: {{item.order_sn}}</text>
            <text class="mony">￥{{item.pay_price}}</text>
          </view>
        </view>
      </view>
    </view>
    
		<uni-load-more :status="more"></uni-load-more>
	</view>

</template>

<script>
	import shop from '@/api/shop.js';
	import MyShops from '@/components/MyShops';
	import uniLoadMore from "@/components/uni-load-more/uni-load-more.vue"
	export default {
		data() {
			return {
				page: 1,
				list: [],
				more: 'loading',
				allMoney: '0.00',
				allCouponMoney: '0.00',
				dateStart: '',
				dateEnd: '',
				newUser: 0,
				oldUser: 0,
				tab: [{
				  text: '当天',
				  value: 'd',
				  active: true
				},{
				  text: '本周',
				  value: 'w',
				  active: false
				},{
				  text: '本月',
				  value: 'm',
				  active: false
				}]
			}
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		components: {
			MyShops,
			uniLoadMore,
		},
		onLoad() {
			const curDate = this.getDate({format: true});
			this.dateStart = curDate;
			this.dateEnd = curDate;
			this.loadData()
			this.getOrderUser('d')
		},
		onReachBottom() {
			if (this.more !== 'noMore') {
				this.more = 'loading'
				this.page++;
				this.loadData();
			}
		},
		methods: {
			setActive(index) {
				this.tab.forEach((item)=>{
				  item.active = false
				})
				this.tab[index].active = true
				this.getOrderUser(this.tab[index].value)
			},
			loadData() {
				shop.orderList({
					page: this.page,
					dateStart: this.dateStart,
					dateEnd: this.dateEnd,
				}).then(res => {
					if (res.code == 1) {
						this.allMoney = res.data.allMoney;
						this.allCouponMoney = res.data.allCouponMoney;
						if (res.data.list.length <= 0) {
							this.more = 'noMore';
						} else {
							this.more = 'more';
						}
						this.list = this.list.concat(res.data.list)
					}
				})
			},
			getOrderUser(type) {
				shop.orderUser({
					type: type
				}).then(res => {
					if (res.code == 1) {
						this.oldUser = res.data.oldUser;
						this.newUser = res.data.newUser;
					}
				})
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;;
				day = day > 9 ? day : '0' + day;
				console.log(`${year}-${month}-${day}`);
				return `${year}-${month}-${day}`;
			},
			bindDateStartChange: function(e) {
				this.dateStart = e.target.value
				if (this.dateStart > this.dateEnd) {
					this.dateEnd = this.dateStart;
				}
				this.page = 1;
				this.more = 'loading';
				this.list = [];
				this.loadData();
			},
			bindDateEndChange: function(e) {
				this.dateEnd = e.target.value
				if (this.dateStart > this.dateEnd) {
					this.dateEnd = this.dateStart;
				}
				this.page = 1;
				this.more = 'loading';
				this.list = [];
				this.loadData();
			},
		}
	}
</script>

<style lang="less" scoped>
  .shop-order-list{
    height: 100vh;
    background: #fff;
  }
  .order-list{
    padding: 15px 0;
    margin: 0 30px;
    .time {
      border-top: 2px solid #F5CDB8;
      border-radius: 6px;
      box-shadow: 0 0 10px #F5CDB8;
    }
    .stat {
    	justify-content: space-around;
    	align-content: flex-start;
    	padding: 5px 0;
      margin: 10px 0 0 0;
      display: flex;
    	.item {
        flex: 1;
        margin-right: 10px;
    		background: #fff;
        box-shadow: 0 0 10px #E7E7E7;
    		text-align: center;
    		border-radius: 6px;
    		padding: 10px 4px;
        border: 1px solid #E7E7E7;
        display: flex;
        .item-icon{
          flex: 0.4;
          image{
            width: 44px;
            height: 44px;
            margin-top: 10px;
          }
        }
        .item-text{
          flex: 0.7;
          .label {
          	font-size: 13px;
          	line-height: 20px;
            font-weight: 500;
          	color: #333;
            margin-bottom: 5px;
            text-align: center;
          }
              
          .num {
          	font-size: 20px;
          	line-height: 30px;
            font-weight: 550;
            text-align: center;
            border-bottom: 1px solid #E8E8E8;
          }
          .no-border{
            border: none;
          }
        }
    	}
      .item:last-child{
        margin-right: 0;
      }
    }
    .order-tab{
      border: 1px solid #B4B4B4;
      border-radius: 4px;
      display: flex;
      .tab-item{
        flex: 1;
        text-align: center;
        font-size: 13px;
        font-weight: 550;
        border-right: 1px solid #B4B4B4;
        padding: 6px;
        box-sizing: border-box;
      }
      .tab-item:last-child{
        border: none;
      }
      .tab-item-active{
        background: #F9714A;
        color: #fff;
      }
    }
  }
	
	.cu-form-group uni-picker .picker {
		text-align: center;
	}

	.cu-form-group uni-picker::after {
		content: '\e661';
	}
  
  .order-time{
    margin-top: 10px;
    .order-time-title{
      font-size: 14px;
      padding: 0 15px 0 25px;
      font-weight: 550;
      position: relative;
      &::before{
        content: "";
        position: absolute;
        left: 15px;
        top: 2px;
        width: 4px;
        height: 16px;
        background: #E98053;
        border-radius: 4px;
      }
    }
  }
  
  .menu{
    margin: 10px 30px;
    .list-item{
      margin-bottom: 10px;
      box-shadow: 0 0 10px #E2E2E2;
      .list-time{
        background: #E3D9D9;
        padding: 5px 10px;
        font-size: 13px;
      }
      .list-content{
        font-size: 14px;
        padding: 5px 10px;
        color: #958888;
        box-shadow: 0 0 10px #E2E2E2;
        .mony{
          float: right;
        }
      }
    }
  }
</style>
